iT邦幫忙

2023 iThome 鐵人賽

DAY 7
0
Mobile Development

App從開發到上架系列 第 7

Day7: iOS 開發:在App內導覽 - NavigationBar

  • 分享至 

  • xImage
  •  

今天要設計每一頁的NavigationBar:
我們直接在BaseViewController底下做就可以了,因為我們每一個畫面都會去繼承BaseViewController:

public func setupNavigationBarStyle(backgroundColor: UIColor,
                                    tintColor: UIColor = .white,
                                    foregroundColor: UIColor = .white) {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    appearance.backgroundColor = backgroundColor
    self.navigationController?.navigationBar.tintColor = tintColor
    appearance.titleTextAttributes = [
        NSAttributedString.Key.foregroundColor : foregroundColor
    ]
    self.navigationController?.navigationBar.standardAppearance = appearance
    self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
    self.navigationItem.title = title
}

然後在BaseViewController 的viewDidLoad加入這段:

override func viewDidLoad() {
    super.viewDidLoad()
    self.setupNavigationBarStyle(backgroundColor: .black)
}

因為我會希望讓標頭在左邊,所以需要自己建立一個Label在上面,程式碼如下:

    let lbNavTitle = UILabel (frame: CGRect(x: 20, y: 10, width: 320, height: 120))
    lbNavTitle.center = CGPoint(x: 50, y: 0)
    lbNavTitle.text = CustomTabBar.items[index].title
    lbNavTitle.font = UIFont.systemFont(ofSize: 20)
    lbNavTitle.backgroundColor = UIColor.black
    lbNavTitle.textColor = UIColor.lightGray
    lbNavTitle.numberOfLines = 0
    lbNavTitle.textAlignment = .left

或是你可以用這種方式:

 let label = UILabel()
        label.textColor = UIColor.lightGray
        label.text = "消息中心"
        self.navigationItem.leftBarButtonItem = UIBarButtonItem.init(customView: label)

上一篇
Day6: iOS 開發:頁面的排版 - Layout
下一篇
Day8: iOS 開發:畫面建構(首頁) -HomePageViewController
系列文
App從開發到上架30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言